<template>
    <div class="right_down">
        <el-button class="search" :onclick="update" v-if="false">启动算法</el-button>
        <div class="nodes">
            源节点
            <input v-model="input1" style="width: 60px" />
            目标节点
            <input v-model="input2" style="width: 60px" />
            <el-button class="search" :onclick="getMessage">查询</el-button>
        </div>

        <div class="datashow">
            <div class="group">
                <div class="DataShowSection">
                    <div class="DataSection">{{metrics.packet_loss}}</div>
                    <div class="unit">%</div>
                    <div class="content">{{cur_type.cur_type}}类型丢包率</div>
                </div>
                <!-- <div class="DataShowSection">
                <div class="DataSection">0</div>
                <div class="unit">ms</div>
                <div class="content">时延</div>
            </div> -->
                <div class="DataShowSection">
                    <div class="DataSection">{{metrics.throughput}}</div>
                    <div class="unit">Mbps</div>
                    <div class="content">{{cur_type.cur_type}}类型数据传输速率</div>
                </div>
            </div>
            <div class="group">
                <div class="DataShowSection">
                    <div class="DataSection">{{metrics.packet_loss_total}}</div>
                    <div class="unit">%</div>
                    <div class="content">总丢包率</div>
                </div>
                <div class="DataShowSection">
                    <div class="DataSection">{{metrics.throughput_total}}</div>
                    <div class="unit">Mbps</div>
                    <div class="content">总数据传输速率</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script lang='js' setup>
import { useCurrentTypeStore } from '../store/cur_type';
import { watch, ref, reactive } from 'vue';
import axios from 'axios';



let input1 = ref();
let input2 = ref();
let cur_type = useCurrentTypeStore();


let current_type = useCurrentTypeStore();
// console.log("right_down", current_type.cur_type);

// watch(() => current_type.cur_type, (value) => {
//     console.log("right_down", value);
// })
console.log(input1.value, input2.value);
let params = reactive({
    source_node: input1.value,
    target_node: input2.value,
    traffic_type: cur_type.cur_type
})
let metrics = reactive({
    packet_loss: 0,
    throughput: 0,
    packet_loss_total: 0,
    throughput_total: 0
})

let url = '127.0.0.1:4523';
// 向后端发起请求【查询】，成功后更新tableData
let getMessage = () => {
    params.source_node = input1.value;
    params.target_node = input2.value;
    params.traffic_type = cur_type.cur_type;
    // console.log(params);


    /*
请求示例
GET /network_metrics?source_node=nodeA&target_node=nodeB&traffic_type=message
    */

    return axios.get(`http://${url}/m1/3601483-3229948-default/network_metrics`, {
        params
    })
        .then(function (response) {
            // 获取并处理数据
            let data = response.data;
            // console.log(data.data);
            metrics.packet_loss = data.data.packet_loss;
            metrics.throughput = data.data.throughput;
            metrics.packet_loss_total = data.data.packet_loss_total;
            metrics.throughput_total = data.data.throughput_total;
        
        })
        .catch(function (error) {
            console.log(error);
        });


}
watch(() => cur_type.cur_type, (value) => {
    //重新查询
    params.traffic_type = value;
    // console.log(params);
    getMessage();
})
// let update = () => {
//     /* 先往后端发送一个请求，启动算法，然后重新加载页面*/
//     axios.get(`http://${url}/m1/3601483-3229948-default/start_algorithm`)
//         .then(function (response) {
//             console.log(response.data.message);
//         })
//         .catch(function (error) {
//             console.log(error);
//         });
//     //刷新页面
//     window.location.reload();
// }


</script>

<style scoped>
.right_down {
    width: 90%;
    height: 90%;
    /* background-color: brown; */
    top: 5%;
    left: 5%;
    position: relative;
}

.nodes {
    top: 10%;
    margin-left: 5%;
    width: 100%;
    height: 20%;
    position: relative;
}



.datashow {
    /* margin-top: 20%; */
    width: 100%;
    height: 60%;
    /* display: flex; */
    /* background-color: brown; */

}
.group{
    margin-top: 10%;
    width: 100%;
    height: 50%;
    display: flex;
    /* background-color: blue; */
}
.DataShowSection {
    width: 50%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 3%;
    /* background-color: rgb(255, 0, 0); */
    /* 文字和箭头颜色 */
    color: rgb(0, 255, 140);
}

.DataSection {
    position: relative;
    left: 5%;
    width: 70%;
    height: 80%;
    font-size: 350%;
    font-family: "DS-Digital";


    display: flex;
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    text-align: center;

}

.unit {
    position: relative;
    top: 20%;
    width: 10%;
    height: 60%;
    display: flex;
    font-size: 100%;
    color: rgb(131, 131, 131);
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
}

.content {
    position: relative;
    /* bottom: 10%; */
    /* top: 1%; */
    width: 100%;
    height: 10%;
    display: flex;
    color: rgb(172, 172, 172);
    /* 使用flexbox布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    font-size: 100%;
    font-family: "Microsoft YaHei";
}

input {
    height: 20px;
    border: 1px solid #ccc;
    background-color: rgb(99, 170, 182);
    /* 圆角 */
    border-radius: 5px;
}

.search {
    /* height: 25px; */
    margin-left: 5%;
    /* 文字居中 */
    text-align: center;
    background-color: rgb(14, 63, 116);
    color: rgb(0, 229, 255);
}

@font-face {
    font-family: 'DS-Digital';
    src: url(/DS-DIGI-1.ttf);
}
</style>